<template>
  <div class="app-container">

    <div>
      <div style="margin-top:40px">
        <div id="container" style="height:700px" tabindex="0" />
      </div>

    </div>
  </div>
</template>

<script>
import { draw_line } from '@/api/ctm_bus'
import city_line from '../../../mock/lines'

export default {
  data() {
    return {

    }
  },
  created() {
  },
  mounted() {
   
    this.initData()
  },
  methods: {
    initData() {
      // this.map = new AMap.Map('container', {
      //   resizeEnable: true,
      //   center: [106.6741670, 26.6187110],
      //   zoom: 13
      // })
      var map = new AMap.Map('container', {
        viewMode: '3D',
        center: [106.6741670, 26.6187110],
        defaultCursor: 'pointer',
        showBuildingBlock: false,
        expandZoomRange: true,
        zooms: [3, 20],
        pitch: 53,
        zoom: 5,
      })

      draw_line().then(res => {
        if (res.code === 200) {
          console.log(res)
          var object3Dlayer = new AMap.Object3DLayer({ zIndex: 10 })

          map.add(object3Dlayer)

          var Line3D = new AMap.Object3D.Line()
          Line3D.transparent = true

          var geometry = Line3D.geometry
          // var city_lines = city_line[0]
          var city_lines = res.data
          for (var i = 0; i < city_lines.length; i++) {
            // 线段
            var od = city_lines[i].line

            var origin = od[0].split(',')
            origin = map.lngLatToGeodeticCoord([origin[0], origin[1]])
            geometry.vertices.push(origin.x, origin.y, 0)
            geometry.vertexColors.push(0, 0.4, 1, 0.3)

            var des = od[1].split(',')
            des = map.lngLatToGeodeticCoord([des[0], des[1]])
            geometry.vertices.push(des.x, des.y, 0)
            geometry.vertexColors.push(0, 0.4, 1, 0.3)
          }

          object3Dlayer.add(Line3D)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.app-container{
  background: #fff;
  margin: 20px;
}
</style>

